<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Related CSS Animations</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'ai-blue': '#165DFF',
                        'ai-cyan': '#00E5FF',
                        'ai-purple': '#9D4EDD',
                        'ai-pink': '#FF2E93',
                        'ai-dark': '#121826',
                        'ai-light': '#F0F4FF',
                    },
                    fontFamily: {
                        'future': ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .glow {
                filter: drop-shadow(0 0 8px currentColor);
            }
            .neural-node {
                @apply absolute rounded-full bg-ai-blue/30 border border-ai-blue/50;
            }
            .neural-connection {
                @apply absolute bg-gradient-to-r from-ai-blue/20 to-ai-cyan/20 transform origin-left;
            }
            .data-particle {
                @apply absolute rounded-full bg-ai-cyan/60;
            }
        }
    </style>
    
    <style>
        /* 神经网络动画 */
        #neural-network {
            position: relative;
            overflow: hidden;
        }
        
        /* 数据流动动画 */
        @keyframes dataFlow {
            0% {
                transform: translateY(100%) scale(0.2);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100%) scale(1);
                opacity: 0;
            }
        }
        
        /* 思考过程动画 */
        @keyframes thinking {
            0%, 100% {
                transform: scale(1);
                opacity: 0.6;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
        }
        
        /* 脉冲效果 */
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(22, 93, 255, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
            }
        }
        
        /* 加载动画 */
        @keyframes loading {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        /* 节点连接动画 */
        @keyframes connect {
            0% {
                width: 0;
                opacity: 0;
            }
            100% {
                width: 100%;
                opacity: 1;
            }
        }
        
        /* 浮动效果 */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        /* 旋转效果 */
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-ai-dark to-ai-dark/90 text-ai-light font-future min-h-screen">
    <header class="container mx-auto py-8 px-4">
        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-center">
            <span class="bg-gradient-to-r from-ai-cyan to-ai-purple text-gradient">AI</span> 动画效果展示
        </h1>
        <p class="text-center text-gray-400 mt-4 max-w-2xl mx-auto">探索与人工智能相关的现代CSS动画效果，包括神经网络、数据流动和AI思考过程模拟</p>
    </header>

    <main class="container mx-auto px-4 pb-16">
        <!-- 神经网络动画 -->
        <section class="mb-16 p-6 bg-ai-dark/50 rounded-2xl border border-ai-blue/20 shadow-lg">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fa fa-sitemap text-ai-cyan mr-3"></i>
                神经网络动画
            </h2>
            <div id="neural-network" class="w-full h-64 md:h-80 rounded-xl overflow-hidden bg-ai-dark/80 relative">
                <!-- 神经网络将由JS动态生成 -->
            </div>
            <p class="mt-4 text-gray-400 text-sm">模拟神经网络中节点之间的连接与信息传递，节点大小表示激活强度</p>
        </section>

        <!-- 数据流动动画 -->
        <section class="mb-16 p-6 bg-ai-dark/50 rounded-2xl border border-ai-purple/20 shadow-lg">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fa fa-exchange text-ai-purple mr-3"></i>
                数据流动动画
            </h2>
            <div class="w-full h-64 md:h-80 rounded-xl overflow-hidden bg-ai-dark/80 relative">
                <div class="absolute top-0 left-1/4 w-1 h-full bg-ai-purple/30"></div>
                <div class="absolute top-0 left-2/4 w-1 h-full bg-ai-purple/30"></div>
                <div class="absolute top-0 left-3/4 w-1 h-full bg-ai-purple/30"></div>
                <!-- 数据流粒子将由JS动态生成 -->
            </div>
            <p class="mt-4 text-gray-400 text-sm">展示数据在AI系统中的流动过程，模拟信息处理和传递</p>
        </section>

        <!-- AI思考过程 -->
        <section class="mb-16 p-6 bg-ai-dark/50 rounded-2xl border border-ai-cyan/20 shadow-lg">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fa fa-lightbulb-o text-ai-cyan mr-3"></i>
                AI思考过程模拟
            </h2>
            <div class="w-full h-64 md:h-80 rounded-xl overflow-hidden bg-ai-dark/80 relative flex items-center justify-center">
                <div class="w-40 h-40 rounded-full bg-ai-cyan/10 border-2 border-ai-cyan/30 relative">
                    <div class="w-24 h-24 rounded-full bg-ai-cyan/20 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="animation: thinking 3s infinite ease-in-out 0.2s"></div>
                    <div class="w-12 h-12 rounded-full bg-ai-cyan/30 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="animation: thinking 3s infinite ease-in-out 0.4s"></div>
                    
                    <!-- 思维链 -->
                    <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full w-1 bg-ai-cyan/40 h-8"></div>
                    <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full mt-[-3rem] px-4 py-2 bg-ai-dark/80 rounded-lg border border-ai-cyan/30 text-ai-cyan text-sm">
                        正在分析问题...
                    </div>
                    
                    <!-- 思维扩散点 -->
                    <div class="w-3 h-3 rounded-full bg-ai-pink absolute top-1/4 left-1/4" style="animation: pulse 2s infinite"></div>
                    <div class="w-3 h-3 rounded-full bg-ai-purple absolute top-3/4 left-1/4" style="animation: pulse 2s infinite 0.5s"></div>
                    <div class="w-3 h-3 rounded-full bg-ai-blue absolute top-1/4 left-3/4" style="animation: pulse 2s infinite 0.8s"></div>
                    <div class="w-3 h-3 rounded-full bg-ai-cyan absolute top-3/4 left-3/4" style="animation: pulse 2s infinite 1.2s"></div>
                </div>
            </div>
            <p class="mt-4 text-gray-400 text-sm">模拟AI思考过程，展示从问题分析到结论形成的思维扩散</p>
        </section>

        <!-- 机器学习训练过程 -->
        <section class="mb-16 p-6 bg-ai-dark/50 rounded-2xl border border-ai-pink/20 shadow-lg">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fa fa-cogs text-ai-pink mr-3"></i>
                机器学习训练过程
            </h2>
            <div class="w-full h-64 md:h-80 rounded-xl overflow-hidden bg-ai-dark/80 relative p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-full">
                    <!-- 训练数据 -->
                    <div class="bg-ai-dark/60 rounded-lg p-4 border border-ai-pink/20">
                        <h3 class="text-ai-pink font-medium mb-3 text-center">训练数据</h3>
                        <div class="space-y-2 h-[calc(100%-40px)] overflow-hidden">
                            <div class="h-3 bg-ai-pink/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-pink w-[85%]" style="animation: float 4s infinite"></div>
                            </div>
                            <div class="h-3 bg-ai-pink/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-pink w-[62%]" style="animation: float 4s infinite 0.3s"></div>
                            </div>
                            <div class="h-3 bg-ai-pink/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-pink w-[91%]" style="animation: float 4s infinite 0.6s"></div>
                            </div>
                            <div class="h-3 bg-ai-pink/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-pink w-[45%]" style="animation: float 4s infinite 0.9s"></div>
                            </div>
                            <div class="h-3 bg-ai-pink/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-pink w-[73%]" style="animation: float 4s infinite 1.2s"></div>
                            </div>
                            <div class="h-3 bg-ai-pink/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-pink w-[58%]" style="animation: float 4s infinite 1.5s"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 模型训练 -->
                    <div class="bg-ai-dark/60 rounded-lg p-4 border border-ai-blue/20 flex flex-col items-center justify-center">
                        <h3 class="text-ai-blue font-medium mb-3 text-center">模型训练</h3>
                        <div class="relative w-24 h-24">
                            <div class="absolute inset-0 rounded-full border-4 border-ai-blue/20 border-t-ai-blue" style="animation: rotate 2s infinite linear"></div>
                            <div class="absolute inset-2 rounded-full border-4 border-ai-cyan/20 border-t-ai-cyan" style="animation: rotate 3s infinite linear reverse"></div>
                            <div class="absolute inset-0 flex items-center justify-center">
                                <span class="text-ai-cyan text-sm font-medium" id="training-percentage">0%</span>
                            </div>
                        </div>
                        <div class="w-full mt-4 h-2 bg-gray-700/50 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-ai-blue to-ai-cyan rounded-full" id="training-progress" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <!-- 预测结果 -->
                    <div class="bg-ai-dark/60 rounded-lg p-4 border border-ai-purple/20">
                        <h3 class="text-ai-purple font-medium mb-3 text-center">预测结果</h3>
                        <div class="space-y-2 h-[calc(100%-40px)] overflow-hidden">
                            <div class="h-3 bg-ai-purple/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-purple w-[12%]" id="result-1" style="width: 0%"></div>
                            </div>
                            <div class="h-3 bg-ai-purple/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-purple w-[45%]" id="result-2" style="width: 0%"></div>
                            </div>
                            <div class="h-3 bg-ai-purple/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-purple w-[88%]" id="result-3" style="width: 0%"></div>
                            </div>
                            <div class="h-3 bg-ai-purple/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-purple w-[23%]" id="result-4" style="width: 0%"></div>
                            </div>
                            <div class="h-3 bg-ai-purple/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-purple w-[67%]" id="result-5" style="width: 0%"></div>
                            </div>
                            <div class="h-3 bg-ai-purple/20 rounded-full overflow-hidden">
                                <div class="h-full bg-ai-purple w-[31%]" id="result-6" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据流动箭头 -->
                <div class="hidden md:block absolute top-1/2 left-[33%] transform -translate-y-1/2 text-ai-cyan">
                    <i class="fa fa-long-arrow-right text-xl" style="animation: float 2s infinite"></i>
                </div>
                <div class="hidden md:block absolute top-1/2 left-[66%] transform -translate-y-1/2 text-ai-cyan">
                    <i class="fa fa-long-arrow-right text-xl" style="animation: float 2s infinite 0.5s"></i>
                </div>
            </div>
            <p class="mt-4 text-gray-400 text-sm">模拟机器学习模型的训练过程，从数据输入到模型训练再到结果输出</p>
        </section>

        <!-- 智能处理动画 -->
        <section class="p-6 bg-ai-dark/50 rounded-2xl border border-ai-blue/20 shadow-lg">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fa fa-microchip text-ai-blue mr-3"></i>
                智能处理单元
            </h2>
            <div class="w-full h-64 md:h-80 rounded-xl overflow-hidden bg-ai-dark/80 relative">
                <div class="absolute inset-0 grid grid-cols-4 grid-rows-4 gap-2 p-4">
                    <!-- 智能处理单元网格 -->
                </div>
                
                <!-- 中央处理核心 -->
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 rounded-full bg-ai-blue/20 border-2 border-ai-blue flex items-center justify-center" style="animation: pulse 3s infinite">
                    <i class="fa fa-cog text-ai-cyan text-2xl" style="animation: rotate 4s infinite linear"></i>
                </div>
            </div>
            <p class="mt-4 text-gray-400 text-sm">展示AI处理单元的并行工作状态，模拟分布式计算和并行处理</p>
        </section>
    </main>

    <footer class="container mx-auto py-6 px-4 text-center text-gray-500 text-sm">
        <p>AI动画效果展示 &copy; 2023 | 使用CSS和JavaScript构建</p>
    </footer>

    <script>
        // 生成神经网络
        function createNeuralNetwork() {
            const container = document.getElementById('neural-network');
            const width = container.offsetWidth;
            const height = container.offsetHeight;
            
            // 创建层
            const layers = 3;
            const nodesPerLayer = 5;
            const layerSpacing = width / (layers + 1);
            
            // 存储所有节点
            const nodes = [];
            
            // 创建节点
            for (let layer = 1; layer <= layers; layer++) {
                const layerX = layerSpacing * layer;
                
                for (let i = 0; i < nodesPerLayer; i++) {
                    const node = document.createElement('div');
                    const nodeSize = 6 + Math.random() * 10;
                    const nodeY = (height / (nodesPerLayer + 1)) * (i + 1);
                    
                    node.classList.add('neural-node');
                    node.style.width = `${nodeSize}px`;
                    node.style.height = `${nodeSize}px`;
                    node.style.left = `${layerX - nodeSize/2}px`;
                    node.style.top = `${nodeY - nodeSize/2}px`;
                    node.style.animation = `pulse ${2 + Math.random() * 3}s infinite`;
                    
                    container.appendChild(node);
                    nodes.push({ element: node, x: layerX, y: nodeY, size: nodeSize });
                }
            }
            
            // 创建连接
            for (let i = 0; i < nodes.length; i++) {
                // 只连接相邻层的节点
                const currentLayer = Math.floor(i / nodesPerLayer);
                if (currentLayer >= layers - 1) continue;
                
                // 连接到下一层的所有节点
                for (let j = i + nodesPerLayer; j < i + 2 * nodesPerLayer && j < nodes.length; j++) {
                    const fromNode = nodes[i];
                    const toNode = nodes[j];
                    
                    // 计算连接线的长度和角度
                    const dx = toNode.x - fromNode.x;
                    const dy = toNode.y - fromNode.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
                    
                    const connection = document.createElement('div');
                    connection.classList.add('neural-connection');
                    connection.style.height = '1px';
                    connection.style.width = `${distance}px`;
                    connection.style.left = `${fromNode.x}px`;
                    connection.style.top = `${fromNode.y}px`;
                    connection.style.transform = `rotate(${angle}deg)`;
                    connection.style.animation = `connect ${1 + Math.random() * 2}s forwards ${Math.random() * 2}s`;
                    
                    container.appendChild(connection);
                }
            }
        }
        
        // 创建数据流粒子
        function createDataFlow() {
            const container = document.querySelector('.overflow-hidden.bg-ai-dark\\/80.relative');
            const streams = container.querySelectorAll('div[class*="left-1/4"], div[class*="left-2/4"], div[class*="left-3/4"]');
            
            streams.forEach((stream, index) => {
                const streamRect = stream.getBoundingClientRect();
                const containerRect = container.getBoundingClientRect();
                const leftPos = streamRect.left - containerRect.left;
                
                // 为每个流创建多个粒子
                for (let i = 0; i < 10; i++) {
                    const particle = document.createElement('div');
                    const size = 3 + Math.random() * 8;
                    
                    particle.classList.add('data-particle');
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.left = `${leftPos - size/2}px`;
                    particle.style.animation = `dataFlow ${3 + Math.random() * 4}s infinite ${i * 0.5}s`;
                    
                    container.appendChild(particle);
                }
            });
        }
        
        // 创建智能处理单元网格
        function createProcessingUnits() {
            const container = document.querySelector('.grid.grid-cols-4.grid-rows-4.gap-2.p-4');
            
            for (let i = 0; i < 16; i++) {
                const unit = document.createElement('div');
                const delay = Math.random() * 2;
                
                unit.classList.add('bg-ai-blue/10', 'rounded', 'border', 'border-ai-blue/20', 'transition-all', 'duration-500');
                unit.style.animation = `pulse ${2 + Math.random() * 3}s infinite ${delay}s`;
                
                container.appendChild(unit);
            }
        }
        
        // 模拟训练过程
        function simulateTraining() {
            const progressBar = document.getElementById('training-progress');
            const percentageText = document.getElementById('training-percentage');
            const results = [
                document.getElementById('result-1'),
                document.getElementById('result-2'),
                document.getElementById('result-3'),
                document.getElementById('result-4'),
                document.getElementById('result-5'),
                document.getElementById('result-6')
            ];
            
            let progress = 0;
            const interval = setInterval(() => {
                progress += 1;
                progressBar.style.width = `${progress}%`;
                percentageText.textContent = `${progress}%`;
                
                // 当进度达到一定程度，开始显示结果
                if (progress >= 30) {
                    const resultProgress = Math.min(100, (progress - 30) * 1.4);
                    results.forEach((result, index) => {
                        // 预设的结果值
                        const targetValues = [12, 45, 88, 23, 67, 31];
                        result.style.width = `${Math.min(targetValues[index], resultProgress)}%`;
                    });
                }
                
                if (progress >= 100) {
                    clearInterval(interval);
                    
                    // 训练完成后添加一些脉动效果
                    setTimeout(() => {
                        simulateTraining(); // 循环训练
                    }, 2000);
                }
            }, 100);
        }
        
        // 页面加载完成后初始化所有动画
        window.addEventListener('load', () => {
            createNeuralNetwork();
            createDataFlow();
            createProcessingUnits();
            simulateTraining();
            
            // 窗口大小改变时重新创建神经网络
            window.addEventListener('resize', () => {
                const container = document.getElementById('neural-network');
                container.innerHTML = ''; // 清空现有内容
                createNeuralNetwork();
            });
        });
    </script>
</body>
</html>
